<template>
   <div class="wrapper">
     <div class="other-dw">
         <p class="t1"><span class="iconfont icon-xinxing"></span>定位失败</p>
         <p class="t2"><span class="iconfont icon-diqiu"></span>必游榜单</p>
     </div>
     <div class="bg1"></div>
      <div class="other-hot">
          <div class="top">
              <p class="t1"><span class="iconfont icon-xinxing"></span>本周热门榜单</p>
              <span class="t2">全部榜单></span>
          </div>
           <ul class="hot-list">
              <li class="imgList oneList" v-for="t in otherList" :key="t.id">
                <img :src="t.imgUrl"/>
                <p class="p1">{{t.address}}</p>
                <p class="p2"><span>￥{{t.price}}</span>起</p>
              </li>
           </ul>
      </div>
     <!--猜你喜欢部分-->
     <ul class="yLike">
        <div class="yLike-top"><span class="iconfont icon-xinxing"></span>猜你喜欢</div>
         <router-link
           tag="li"
           class="yLike-box"
           v-for="t in yLike"
           :key="t.id"
           :to="/detail/+t.id"
         >
            <img class="yLike-img" :src="t.imgUrl" alt="">
            <div class="yLike-box2">
                <p class="t1">{{t.desc}}</p>
                <p class="t2"><span>*****</span> <span>{{t.num}}条评论</span></p>
                <div class="t3">
                   <p><i>￥</i><b>{{t.price}}</b>起</p>
                   <span>{{t.address}}</span>
                 </div>
                <p class="t4">{{t.text}}</p>
            </div>
          </router-link>
     </ul>
   </div>
</template>

<script>
export default {
  name: 'HomeOther',
  props: {
    otherList: Array,
    yLike: Array
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="stylus" scoped>
  .other-dw{
    margin-top :.05rem;
    border-top:.01rem solid gainsboro;
    height:.46rem;
    display flex
    font-size .14rem
    .t1{
      width: 50%
      border-right:.01rem solid gainsboro;
      box-sizing :border-box;
      text-align center
      line-height .46rem
    }
    .t2{
      width:50%;
      text-align center
      line-height .46rem
    }
  }
  .bg1{
    width: 100%
    height:.1rem;
    background-color :#f5f5f5;
  }
  .other-hot{
    .top{
       margin-top:.1rem;
      .t1{font-size :.16rem;
         }
      .t2{
        margin-right :.05rem;
      }
        margin-left :.1rem;
        display flex
        justify-content space-between
    }
  }
//  热门图片列表部分
  .hot-list{
    overflow-x:scroll;
    white-space nowrap
    .top{
      padding-top :.1rem;
    }
    .oneList{
      margin-left:.1rem !important;
    }
    .imgList{
      width:1rem;
      margin-top :.15rem;
      margin-left :.06rem;
      text-align center
      display inline-block
      img{
        width:1rem;
      }
      .p1{
        margin:.05rem 0;
      }
      .p2{
        margin-bottom .05rem;
        span{
          color:#ff8e17;
        }
      }
    }
  }
//  猜你喜欢部分
   .yLike{
      .yLike-top{
        span{
          color:red;
        }
        margin-left :.1rem;
        line-height :.35rem;
        font-size :.16rem;
      }
      .yLike-box{
        border-bottom:.01rem solid gainsboro;
        overflow:hidden;
        margin-top :.1rem;
        margin-left:.1rem;
         img{
           width:1rem;
           float :left;
         }
        .yLike-box2{
          width:65%;
          float:left;
          margin-left:.1rem;
          .t1{
            font-size :.16rem;
            line-height :.4rem;
          }
          .t3{
            display :flex;
            justify-content space-between
            line-height :.4rem;
            i{
              color:orange;
            }
            b{
              color:orange;
              font-size :.2rem;
            }
            span{
              text-align :right;
            }
          }
          .t4{
            margin:.2rem 0;
            color:red;
          }
        }
      }
   }
</style>
